<template>
  <div>
    <!-- 面包屑导航区域 -->
    
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="font-size: 15px"
    >
      <el-breadcrumb-item :to="{ path: '/order' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
      
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div class="wrapper">
        <div class="header">
          <span>订单编号:{{ order.number }}</span>
          <span class="type">{{ order.distributionType }}</span>
          <span :class="state">{{ order.state }}</span>
        </div>
        <div class="userInfo">
          <div class="userInfo_wrapper">
            <h2 class="username">下单用户：{{ order.userName }}</h2>
            <div class="name_phone">
              <span>联系人：{{ order.addressName }}</span>
              <span class="marginLeft">手机号：{{ order.phone }}</span>
              <span class="marginLeft" v-if="order.distributionType === '配送'">配送地址：{{ order.address }}</span>
              <span class="marginLeft" v-if="order.distributionType === '自取'">取餐码：{{order.code}}</span>
            </div>
          </div>
        </div>
        <div class="goodsInfo">
          <h2>商品信息</h2>
          <el-table
            class="goodsTable"
            :data="commodityList"
            stripe
            style="width:100%"
          >
            <el-table-column
              prop="commodityName"
              label="名称"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="flavor"
              label="口味"
              width="180"
              v-if="commodityShow"
            ></el-table-column>
            <el-table-column
              prop="quality"
              label="质量"
              width="180"
              v-if="commodityShow"
            ></el-table-column>
            <el-table-column
              prop="temperature"
              label="温度"
              width="180"
              v-if="milkyTeaShow"
            ></el-table-column>
            <el-table-column
              prop="sweetness"
              label="糖分"
              width="180"
              v-if="milkyTeaShow"
            ></el-table-column>
            <el-table-column
              prop="material"
              label="配料"
              width="250"
              v-if="milkyTeaShow"
            >
            </el-table-column>
            <el-table-column
              prop="price"
              label="单价"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="number"
              label="数量"
              width="180"
            ></el-table-column>
          </el-table>
        </div>
        <div class="mark">
          <div class="wrapper">
            <span>备注：{{ order.remarks }}</span>
            <div class="price">
              <span>配送费：{{order.delivery}}</span>
              <span>满减：{{order.reduce}}</span>
              <span class="total">总价：{{order.total}}</span>
            </div>
          </div>
        </div>
        <div class="footer">
          <span>下单时间：{{ order.data }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order: {
        userName: "",
        addressName: "",
        address: "",
        code: "",
        commodityType: "",
        data: "", //时间
        delivery: "",
        distributionType: "",
        number: "",
        phone: "",
        reduce: "",
        remarks: "",
        state: "",
        total: "",
        materialVO: [],
      },
      commodityList: [],
      milkyTeaShow: false,
      commodityShow: false,
      state:"state",
    };
  },
  created() {
    //得到指定的订单
    this.getOrderById(this.$route.params.id);
  },
  methods: {
    //得到此id的商品信息
    async getOrderById(id) {
      const { data: res } = await this.$http.get("order/getOrderById?id=" + id);
      console.log("========================");
      console.log(res);
      this.commodityList = res.data.order.commodityVO;
      this.order.commodityType = res.data.order.commodity_type;
      this.order.userName = res.data.order.userName;
      this.order.number = res.data.order.number;
      this.order.distributionType = res.data.order.distribution_type;
      this.order.state = res.data.order.state;
      this.order.delivery = res.data.order.delivery+"元";
      if(this.order.delivery == "null元"){
        this.order.delivery = "0元"
      }
      this.order.phone = res.data.order.phone;
      this.order.address = res.data.order.address;
      this.order.addressName = res.data.order.addressName;
      this.order.code = res.data.order.code;
      this.order.data = res.data.order.data;
      this.order.reduce = res.data.order.reduce/100+"元";
      this.order.remarks = res.data.order.remarks;
      this.order.total = res.data.order.total/100+"元";

      for (var i = 0; i <this.commodityList.length; i++) {
        console.log(this.commodityList)
        var material=""
        this.commodityList[i].price = this.commodityList[i].price/100+'元';
        for (const j in this.commodityList[i].materialVO) {
          console.log('this.order.materialVO[j]',this.order.materialVO[j])
          
          material +=this.commodityList[i].materialVO[j].name+'：'
          material += this.commodityList[i].materialVO[j].price/100+'元、'
          
        }
        console.log("=======================")
        console.log(i)
        
        this.commodityList[i].material=material
          // console.log(this.commodityList[i].material,'this.commodityList[i].material',i)
          material = ""
        
        // console.log(this.commodityList[i].material,'this.commodityList[i].material')
        // console.log(this.order.material)
      }
      // console.log(this.order.material,'material')


      if (this.order.commodityType === "奶茶") {
        this.milkyTeaShow = true;
      } else {
        this.commodityShow = true;
      }
      console.log("=======================");
      console.log(this.milkyTeaShow);
      console.log(this.order.materialVO);
      if(this.order.state === "已完成"){
        this.state = "state statecolor"
      }
      return;
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  text-align: start;
  // background-color: aquamarine;
  width: 100%;
  height: 60%;

  .header {
    // display: flex;
    font-size: 16px;
    background-color: #409eff20;
    background-color: #f2f6fc;

    // background-color: rgb(217, 214, 214);
    color: #409eff;
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    border-bottom: 1px solid #ced6e0;
    position: relative;
    .type {
      // display: inline;
      // width: 200px;
      // height: 200px;
      // line-height: 50px;
      color: rgb(255, 255, 255);
      font-size: 14px;
      padding: 10px 20px;
      border-radius: 15px;
      letter-spacing: 3px;
      background-color: #409eff;
      margin-left: 50px;
      
    }
    .state {
      color: rgb(255, 255, 255);
      // padding: 10px 40px;
      font-size: 14px;
      background-color: #f56c6c;
      border-radius: 15px;
      width: 110px;
      // height: 25px;
      // line-height: 50px;
      position: absolute;
      // top: 10px;
      // padding: 10px 0px;
      // padding-bottom: 20px;
      right: 30px;
      text-align: center;
      // margin-left: 60%;
    }
    .statecolor{
      background-color: #67C23A;
    }
  }
  .userInfo {
    background-color: #a4b0be15;
    background-color: #f2f6fc;
    height: 100px;
    border-bottom: 1px solid #ced6e0;
    padding-left: 30px;
    .userInfo_wrapper {
      .username {
        margin-top: 0px;
        padding-top: 18.72px;
      }
      .name_phone {
        color: #606266;
        font-size: 14px;
        .marginLeft {
          margin-left: 150px;
        }
      }
    }
  }
  .goodsInfo {
    padding-left: 30px;
    background-color: #a4b0be15;
    background-color: #f2f6fc;
    // height: 200px;
    h2 {
      padding-top: 20px;
      margin: 0px;
    }
    .goodsTable {
      background-color: #f2f6fc;
    }
    border-bottom: 1px solid #ced6e0;
    padding-bottom: 20px;
  }
  .mark {
    background-color: #a4b0be15;
    background-color: #f2f6fc;
    height: 50px;
    line-height: 50px;
    .wrapper {
      padding-left: 30px;
      font-weight: bold;
      font-size: 14px;
      position: relative;
      span {
        margin-left: 10px;
      }
      .price {
        position: absolute;
        display: inline;
        // margin-left: 800px;
        right: 50px;
        .total {
          font-size: 18px;
        }
      }
    }
    border-bottom: 1px solid #ced6e0;
  }
  .footer {
    padding-left: 30px;
    background-color: #a4b0be15;
    background-color: #f2f6fc;
    height: 50px;
    line-height: 50px;
    font-size: 12px;
    color: #606266;
  }
}
</style>
